<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <!-- 使用响应式布局 -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <link rel="icon" href="../img/icon/B.ico">
    <title>24_bootstrap网站后台管理、导航</title>
    <link rel="stylesheet" href="../bootstrap-3.3.7/css/bootstrap.css"/>
    <script type="text/javascript" src="../jquery-3.3.1/jquery-3.3.1.js"></script>
    <script type="text/javascript" src="../bootstrap-3.3.7/js/bootstrap.js"></script>
    <style type="text/css">

        /*超小屏幕（手机，小于 768px）*/
        /*没有任何媒体查询相关的代码，因为这在 Bootstrap 中是默认的（还记得 Bootstrap 是移动设备优先的吗？） *!*/
        /*小屏幕（平板，大于等于 768px） *!*/
        /*@media (min-width: @screen-sm-min) { ... }*/
        /*中等屏幕（桌面显示器，大于等于 992px）*/
        /*@media (min-width: @screen-md-min) { ... }*/
        /*大屏幕（大桌面显示器，大于等于 1200px）*/
        /*@media (min-width: @screen-lg-min) { ... }*/

        /*当大于768像素的时候，id为sliderSub 的div,设置置该属性；否则全屏显示*/
        @media (min-width: 768px) {
            #sliderSub {
                height: 1118px;
                width: 255px;
                margin-top: 1px;
                position: absolute;
                z-index: 1;
            }
            /*类选择器  ： mySearch上下间距 10px ,左右0*/
            .mySearch{
                margin: 10px 0;
            }

            .myPage_main{
                height: 1095px;
                margin-top: 20px;
                margin-left: 270px;
                /*position: absolute;*/
                /*z-index: 1;*/
            }
        }

    </style>
</head>

<body>

<!-- 导航栏 -->
<nav class="navbar navbar-default navbar-static-top">
    <div class="navbar-header">
        <a href="#" class="navbar-brand">网站后台管理</a>
        <!-- 页面缩小后响应式按钮效果 -->
        <!-- class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbarExampleId" -->
        <!--aria-expanded="false" aria-controls="navbar"-->
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbarExampleId">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
    </div>
    <!-- class="collapse"：这个属性表示默认隐藏 -->
    <div id="navbarExampleId" class="collapse navbar-collapse">
        <!-- style="margin-right: 25px" :导航栏距最右边相隔25像素 -->
        <ul class="nav navbar-nav navbar-right" style="margin-right: 25px">
            <!-- class="badge" 徽章 :一般用于消息条数的显示 -->
            <li><a href="#username">admin</a></li>
            <li class="active"><a href="#message">未读消息&nbsp;<span class="badge" style="background: #b92c28">15</span></a></li>
            <li><a href="#off"><span class="glyphicon glyphicon-off"></span>&nbsp;注销</a></li>
        </ul>
    </div>


    <!-- 侧边功能栏 -->
    <div id="sliderSub" class="navbar-default navbar-collapse">
        <ul class="nav">
            <li>
                <!-- 搜索 -->
                <div class="input-group mySearch">
                    <input type="text" class="form-control" placeholder="菜单功能名称"/>
                    <span class="input-group-btn">
                        <button type="button" class="btn btn-default">
                            <span class="glyphicon glyphicon-search">&nbsp;搜索</span>
                        </button>
                    </span>
                </div>
            </li>
            <li>
                <!-- data-toggle="collapse"：表示点击这个按钮有显示效果 -->
                <a href="#sub1" data-toggle="collapse"><span class="glyphicon glyphicon-cog"/>&nbsp;用户设置<span class="glyphicon glyphicon-chevron-right pull-right"/></a>
                <ul id="sub1" class="collapse navbar">
                    <li><a href="#"><span class="glyphicon glyphicon-pawn"/>&nbsp;系统信息</a></li>
                    <li><a href="#"><span class="glyphicon glyphicon-record"/>&nbsp;管理员管理</a></li>
                    <li><a href="#"><span class="glyphicon glyphicon-exclamation-sign"/>&nbsp;日志信息<span class="glyphicon glyphicon-chevron-right pull-right"/></a></li>
                    <li><a href="#"><span class="glyphicon glyphicon-indent-right"/>&nbsp;退出</a></li>
                </ul>
            </li>
            <li>
                <a href="#sub2" data-toggle="collapse"><span class="glyphicon glyphicon-jpy"/>&nbsp;钱包管理<span class="glyphicon glyphicon-chevron-right pull-right"/></a>
                <ul id="sub2" class="collapse navbar">
                    <li><a href="#"><span class="glyphicon glyphicon-pawn"/>&nbsp;系统信息</a></li>
                    <li><a href="#"><span class="glyphicon glyphicon-record"/>&nbsp;管理员管理</a></li>
                    <li><a href="#"><span class="glyphicon glyphicon-exclamation-sign"/>&nbsp;日志信息<span class="glyphicon glyphicon-chevron-right pull-right"/></a></li>
                    <li><a href="#"><span class="glyphicon glyphicon-indent-right"/>&nbsp;退出</a></li>
                </ul>
            </li>
            <li>
                <a href="#sub3" data-toggle="collapse"><span class="glyphicon glyphicon-question-sign"/>&nbsp;用户反馈<span class="glyphicon glyphicon-chevron-right pull-right"/></a>
                <ul id="sub3" class="collapse navbar">
                    <li><a href="#"><span class="glyphicon glyphicon-pawn"/>&nbsp;系统信息</a></li>
                    <li><a href="#"><span class="glyphicon glyphicon-record"/>&nbsp;管理员管理</a></li>
                    <li><a href="#"><span class="glyphicon glyphicon-exclamation-sign"/>&nbsp;日志信息<span class="glyphicon glyphicon-chevron-right pull-right"/></a></li>
                    <li><a href="#"><span class="glyphicon glyphicon-indent-right"/>&nbsp;退出</a></li>
                </ul>
            </li>
            <li>
                <a href="#sub4" data-toggle="collapse"><span class="glyphicon glyphicon-calendar"/>&nbsp;系统统计<span class="glyphicon glyphicon-chevron-right pull-right"/></a>
                <ul id="sub4" class="collapse navbar">
                    <li><a href="#"><span class="glyphicon glyphicon-pawn"/>&nbsp;系统信息</a></li>
                    <li><a href="#"><span class="glyphicon glyphicon-record"/>&nbsp;管理员管理</a></li>
                    <li><a href="#"><span class="glyphicon glyphicon-exclamation-sign"/>&nbsp;日志信息<span class="glyphicon glyphicon-chevron-right pull-right"/></a></li>
                    <li><a href="#"><span class="glyphicon glyphicon-indent-right"/>&nbsp;退出</a></li>
                </ul>
            </li>
            <li>
                <a href="#sub5" data-toggle="collapse"><span class="glyphicon glyphicon-cog"/>&nbsp;系统管理<span class="glyphicon glyphicon-chevron-right pull-right"/></a>
                <ul id="sub5" class="collapse navbar">
                    <li><a href="#"><span class="glyphicon glyphicon-pawn"/>&nbsp;系统信息</a></li>
                    <li><a href="#"><span class="glyphicon glyphicon-record"/>&nbsp;管理员管理</a></li>
                    <li><a href="#"><span class="glyphicon glyphicon-exclamation-sign"/>&nbsp;日志信息<span class="glyphicon glyphicon-chevron-right pull-right"/></a></li>
                    <li><a href="#"><span class="glyphicon glyphicon-indent-right"/>&nbsp;退出</a></li>
                </ul>
            </li>
            <li>
                <a href="#sub6" data-toggle="collapse"><span class="glyphicon glyphicon-envelope"/>&nbsp;通知消息<span class="glyphicon glyphicon-chevron-right pull-right"/></a>
                <ul id="sub6" class="collapse navbar">
                    <li><a href="#"><span class="glyphicon glyphicon-pawn"/>&nbsp;系统信息</a></li>
                    <li><a href="#"><span class="glyphicon glyphicon-record"/>&nbsp;管理员管理</a></li>
                    <li><a href="#"><span class="glyphicon glyphicon-exclamation-sign"/>&nbsp;日志信息<span class="glyphicon glyphicon-chevron-right pull-right"/></a></li>
                    <li><a href="#"><span class="glyphicon glyphicon-indent-right"/>&nbsp;退出</a></li>
                </ul>
            </li>
        </ul>
    </div>

</nav>

<!-- 核心区域 -->
<div class="myPage_main" style="background: #d5d5d5">

<h1>ddd</h1>
</div>

</body>
</html>